<template>
  <div class="content">
    <div class="content-top">
      <span class="active">昨日预警</span>
      <span :class="activeIndex === 1 ? 'active-type' : ''" @click="changeTab(1)">大用户表</span>
      <span :class="activeIndex === 0 ? 'active-type' : ''" @click="changeTab(0)">户表</span>
    </div>
    <div class="content-bottom">
      <div class="bottom-right" id="mainPage">
        <!--        <el-carousel ref="carousel" indicator-position="outside" @change="changeCarouselItem"-->
        <!--                     @setActiveItem="setActiveItem">-->
        <!--          <el-carousel-item key="0">-->
        <!--            &lt;!&ndash;            <div id="main" ref="mainXb"></div>&ndash;&gt;-->
        <!--            -->
        <!--          </el-carousel-item>-->
        <!--          <el-carousel-item key="1">-->
        <!--            &lt;!&ndash;            <div id="main" ref="mainDb" style="width: 3.2rem;height: 2rem"></div>&ndash;&gt;-->
        <!--            <dv-active-ring-chart :config="configDb" style="width: 3.2rem;height: 2.2rem;"/>-->
        <!--          </el-carousel-item>-->
        <!--        </el-carousel>-->
        <div v-if="activeIndex === 0">
          <dv-active-ring-chart id="chart" :key="key" :config="configXb" style="width: 100%;height: 24vh;"/>
        </div>
        <div v-if="activeIndex === 1">
          <dv-active-ring-chart id="chart" :config="configDb" style="width: 100%;height: 24vh;"/>
        </div>
      </div>
<!--      <div class="bottom-left">-->
<!--        <div class="img"></div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import { getDicts } from '@/api/system/dict/data.js'
import ElementResizeDetectorMaker from 'element-resize-detector'
import "swiper/css/swiper.min.css"
import {dataForBigScreen} from "../../../api/bigScreen";
require('echarts/theme/macarons') // echarts theme
export default {
  name: "AlarmStatisticsDb",
  data() {
    return {
      key: 0,
      // 小表报警数据类型
      alarmTypeXbList: [],
      // 大表报警数据类型
      alarmTypeDbList: [],
      dataListXb: [],
      dataListDb: [],
      myChartXb: null,
      myChartDb: null,
      activeIndex: 2,
      selectOptions: [{label: '大用户表', value: 1}, {label: '户表', value: 0}],
      configXb: {},
      configDb: {},
      // 报警类型
      alarmTypeList: [],
    }
  },
  mounted() {
    this.timeFun()
    this.getList()
    this.activeIndex = 1
    this.pieOutlineFunc()
    this.getAlarmType()
  },
  methods: {
    pieOutlineFunc () {
      let _this=this
      window.addEventListener('resize', function(e){
        _this.$nextTick(()=>{
          _this.key++
        })
      })
    },
    getAlarmType(){
      getDicts('warn_param_type').then(res => {
        if(res.code === 200) {
          this.alarmTypeList = res.data
        }
      })
    },
    // 获取数据
    getList() {
      dataForBigScreen().then(response => {
        if (response.code === 200) {
          this.dataListXb = response.data.xbWarn
          this.dataListDb = response.data.dbWarn
          this.initXb()
          this.initDb()
        }
      })
    },
    changeTab(index) {
      this.setActiveItem(index)
    },
    // 设置当前展示的图表
    setActiveItem(index) {
      this.activeIndex = index
      this.initDb()
      this.initXb()
    },
    // 初始化小表预警图表
    initXb() {
      let data = []
      for(let i = 0; i < this.dataListXb.length; i++){
        for(let j = 0; j< this.alarmTypeList.length; j++) {
          if(this.dataListXb[i].warnParamType.toString() === this.alarmTypeList[j].dictValue){
            let obj = {
              name: this.alarmTypeList[j].dictLabel,
              value: this.dataListXb[i].warnCount
            }
            data.push(obj)
          }
        }
      }
      this.configXb = {
        radius: '75%',
        activeRadius: '80%',
        data: data,
        showOriginValue: true,
        color: ['#00c8d5','#469F4B','#19C7A2','#92E486','#F9F871','#D16BA5']
      }
    },
    // 初始化大表预警图表
    initDb() {
      let data = []
      for(let i = 0; i < this.dataListDb.length; i++){
        for(let j = 0; j< this.alarmTypeList.length; j++) {
          if(this.dataListDb[i].warnParamType.toString() === this.alarmTypeList[j].dictValue){
            let obj = {
              name: this.alarmTypeList[j].dictLabel,
              value: this.dataListDb[i].warnCount
            }
            data.push(obj)
          }
        }
      }
      this.configDb = {
        radius: '80%',
        activeRadius: '85%',
        data: data,
        showOriginValue: true,
        color: ['#00c8d5','#469F4B','#19C7A2','#92E486','#F9F871','#D16BA5']
      }
    },
    // 定时器 控制展示的是大用户表内容还是户表内容
    timeFun() {
      let timer = null
      timer = setInterval(() => {
        if (this.activeIndex >= 1) {
          this.activeIndex = 0
        } else {
          this.activeIndex++
        }
      }, 20000)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;

  .content-top {
    cursor: pointer;
    //padding: 0.2rem 0 0.1rem 0.2rem;
    height: 5vh;
    line-height: 5vh;
    padding-left: .2rem;

    span {
      color: #00d8ff;
      font-family: "Adobe 仿宋 Std R";
      font-size: .2rem;
      font-weight: 520;
      padding: 0 .1rem;
    }

    span:first-child {
      border-right: 0.01rem solid #1950c4;
      padding-left: 0;
    }

    span.active {
      font-size: .2rem;
      color: #fff;
    }

    .active-type {
      font-size: .18rem;
      margin: .1rem;
      padding: .05rem .05rem;
      background: #3aa0e5;
      color: white;
      border-radius: 5px;
    }
  }

  //.img{
  //  background: url("../../../assets/static/image/lbx.png") no-repeat;
  //  background-size: 100% 100%;
  //  background-position: center center;
  //  height:1.5rem;
  //  width: 1.5rem;
  //  margin: 0 auto;
  //  animation: rotate 15s infinite linear;
  //}
}

.content-bottom {
  //height: 2.4rem;
  width: 100%;
  display: flex;

  .bottom-left {
    width: 100%;
    display: flex;
    align-items: center;

    .img {
      background: url("../../../assets/static/image/lbx.png") no-repeat;
      background-size: 100% 100%;
      background-position: center center;
      height: 1.6rem;
      width: 1.6rem;
      margin: 0 auto;
      animation: rotate 15s infinite linear;
      //box-shadow: 0 0 22px #0e6eb8;
      //border-radius: 50%;
    }
  }

  .bottom-right {
    width: 100%;

    .main {
      width: 100%;
      height: 24vh;
    }
  }
}

.content-right {
  width: 56%;
  position: relative;

  .select {
    padding: .15rem .2rem 0 0;
    text-align: right;

    ::v-deep .el-input__inner {
      background: transparent !important;
      color: white;
      border: 1px solid #1c84c6;
    }
  }

  .content-echarts {
    height: 2.4rem;
    width: 100%;
    padding: .1rem 0;
  }
}

//#main{
//  flex: 2;
//  width: 56%;
//  height: 3rem;
//}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
::v-deep .dv-active-ring-chart .active-ring-info .active-ring-name {
  font-size: .13rem !important;
  width: 150px;
  //padding: 0 .2rem;
}
</style>
